<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 通过meta标签,设定读取网络来源图片 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <style>
    .num{
      width: 50px;
      height: 50px;
      font-size: 20px;
      text-align: center;
      color: black;
    }
  </style>
</head>
<body>
<h1>详情页</h1>

<div class="container"></div>

<script src="../js/jquery.min.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/cookie.js"></script>
<script>
  // 定义全局变量 存储商品信息
  let goodsMsg;


  // 1, 获取地址栏参数
  const urlObj = getUrlVal();
  // console.log(urlObj);

  // 2, 根据 goods_id 向 后端数据库 
  // 通过 promise 发送请求
  // 获取结果 动态渲染生成页面
  const p = new Promise(function(f,r){
    // 发送ajax请求
    $.ajax({
      url:'../server/goods_detail.php',
      type:'post',
      data:{goods_id: urlObj.goods_id},
      dataType:'json',
      success: f,
      error: r,
    })
  })

  // 请求成功，动态渲染生成页面
  p.then(function(res){
    // 给全局变量赋值
    goodsMsg = res;
    console.log(res);

    // 动态生成页面内容
    let str = `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="${res.goods_small_logo}" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${res.goods_name}</h4>
              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${res.goods_price}</span>
              </p>
              <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">XL</button>
                <button type="button" class="btn btn-default">L</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">XS</button>
              </div>
              <p style="position:relative">
                  <input value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default" disabled>-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
              </p>
              <p>
                <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                <a name="inCart" href="JavaScript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
              </p>
            </div>
          </div>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
          </ul>
          <div>
              ${res.goods_introduce}
          </div>
        </div>
      </div>
    `;

    // 写入页面
    $('.container').html(str);
  })

  // 3, 购物车按钮 添加点击事件
  // 通过事件委托语法 完成添加事件
  $('.container').click(function(e){
    // 通过事件委托 判断 点击的是 加入购物车 按钮
    // 如果 标签 name 是 inCart 点击的是 加入购物车按钮
    if( e.target.getAttribute('name') === 'inCart' ){
      // 1, 获取 cookie的数据
      const cookieObj =  myGetCookie();

      // 2, 如果 cookieObj.login 是 undefined 证明 没有登录信息
      if( cookieObj.login === undefined ){
        if( window.confirm('您还没有登录,点击确定,跳转登录页面') ){
          // 没有登录
          window.location.href = `./login.html?url=${window.location.href}`;
        }
      }else{
        // 已经登录
        // 将数据加入购物车

        // 先判断 购买数量 是不是符合 需求
        // 购买数量 应该是 >= 1 并且 <= 库存
        // 如果不符合这个范围 
        // 1, 弹出提示信息 不符合规范 
        // 2, 如果 < 1 赋值 1  如果 >= 库存 就赋值 库存
        // 3, 终止之后的程序的执行
        if( !($('.num').val()-0 >= 1 && $('.num').val()-0 <= goodsMsg.goods_number) ){
          // 弹出提示信息
          window.alert( `您输入的购买数量有限，必须是大于1 小于${goodsMsg.goods_number}` );

          if($('.num').val()-0 < 1){
            // 赋值1
            $('.num').val( 1 );

            // 减禁用
            $('[name="-"]').prop('disabled' , true);
            // 加可以用
            $('[name="+"]').prop('disabled' , false);

          }else if($('.num').val()-0 > goodsMsg.goods_number ){
            // 赋值库存
            $('.num').val( goodsMsg.goods_number );

            // 加禁用
            $('[name="+"]').prop('disabled' , true);
            // 减禁用
            $('[name="-"]').prop('disabled' , false);

          }

          // 终止之后的程序
          return;
        }

        // 获取本地localStorage的数据
        let cart = localStorage.cart;
        // console.log(cart);

        // 没有创建购物车信息 结果是undefined
        if(cart === undefined){
          // 还没有创建 购物车信息
          // 创建一个新的 数组 存储当前商品的信息

          // 给商品信息 添加属性和属性值
          // 购买数量属性 默认值是1
          goodsMsg.num = $('.num').val();
          // 购买状态属性 默认值是true就支付
          goodsMsg.buy = true;



          // 创建一个空数组
          const arr = [];
          // 将商品信息写入空数组的起始位置
          arr.unshift( goodsMsg );
          // 将数组数据，存储到localStorage中
          // localStorage中只能存储字符串或者json字符串
          localStorage.cart = JSON.stringify(arr);

        // 有购物车信息，添加
        }else{
          // 将json字符串还原为数组
          cart = JSON.parse(cart);
          // console.log(cart);

          // 判断有没有这个商品 true有这个商品 false没有这个商品
          let bool = cart.some(function(item){
            // console.log(item);

            // 购车中存储商品的 goods_id 和 当前页面中显示商品的goods_id
            // 如果 相同 证明 购物车中 有这个 商品
            return item.goods_id === goodsMsg.goods_id;
          });
          // console.log(bool);

          if (bool) {
            // 当前商品已经存在于购物车中
            // 循环遍历 购物车数组 找到 goods_id 相同的数据
            for(let i = 0 ; i <= cart.length-1 ; i++ ){
              if (cart[i].goods_id === goodsMsg.goods_id) {
                // 存储购买数量的属性 属性值 累加1
                cart[i].num++;
                break;
              }
            }
          }else{
            // 购物车中 没有 当前商品 在 起始位置 新增当前商品
            // 当前商品 新增属性
            goodsMsg.num = $('.num').val();
            goodsMsg.buy = true;

            cart.unshift(goodsMsg);
          }


          // 将 新的数组数据 写入 localStorage 购物车信息
          localStorage.cart = JSON.stringify(cart);
        }


        // 跳转购物车页面
        window.location.href = './cart.html';
      }

    // 如果 点击标签 name 是 - 证明点击的是 购买数量 -1 的 按钮
    }else if(e.target.getAttribute('name') === '-'){
      // 给 class 是 num的标签 value值 累减1
      $('.num').val( $('.num').val() -1 );

      // 写在点击事件中的 只有点击才会触发
      // 刚 购买数量 减少到1 就不能再减了
      if( $('.num').val() === '1'){
        e.target.disabled = true;
      }

      // 执行执行了 减 操作 +按钮 就能用了
      $('[name="+"]').prop('disabled' , false);

     // 如果 点击标签 name 是 + 证明点击的是 购买数量 +1 的 按钮
    }else if(e.target.getAttribute('name') === '+'){
      // 给 class 是 num的标签 value值 累加1

      $('.num').val( $('.num').val()-0 +1 );
      // 写在点击事件中的 只有点击才会触发

      // 如果 购买数量已经 达到库存 禁用 + 标签
      if($('.num').val() === goodsMsg.goods_number){
        // 禁用+标签
        $('[name="+"]').prop('disabled' , true);
      }

      
      // 判断减按钮是否禁用
      // 只要 执行 购买数量+ 操作
      // 减按钮就可以用
      $('[name="-"]').prop('disabled' , false);

    }
  
  })
</script>

</body>
</html>
